<template>
    <div class='rank'>
        <van-nav-bar
         left-text="排行榜"
        right-text="更多"
        left-arrow
        @click-left="onClickLeft"
       />
       <!-- 标签栏 -->
       
       <van-tabs v-model="active" scrollspy sticky>
           <div class="frame">
                <van-tab title="官方">
                    <h1 class="top">官方榜</h1>
                    <div class="index-list">
                        <router-link :to="{name:'ranklist',query:{id:item.id}}" v-for="(item, index) in musei" :key="index">
                            <div class="index-list-item index-list-one">
                                <div class="index-list-img">
                                    <img :src="item.coverImgUrl" alt="">
                                    <span>{{item.updateFrequency}}</span>
                                </div>
                                <div class="index-list-text">
                                    <div v-for="(item,index) in item.tracks" :key="index" >
                                        {{index +1}}.{{item.first}}-{{item.second}}
                                    </div>
                                </div>
                            </div>
                        </router-link>
                    </div>
                </van-tab>
            </div>
            <!-- 云音乐 -->
            <div class="frame">
                <van-tab title="云音乐">
                    <h1 class="top">云音乐榜</h1>
                    <div class="index-list index-list-two aa">
                        <router-link :to="{name:'ranklist',query:{id:item.id}}" v-for="(item, index) in m" :key="index">
                        
                                <div class="index-list-im">
                                    <img :src="item.coverImgUrl" alt="">
                                    <span>{{item.updateFrequency}}</span>
                                    <p class="ming">{{item.name}}</p>
                                </div>
                                
                        
                        </router-link>
                    </div>
                </van-tab>
            </div>
            <!-- 曲风 -->
            <div class="frame">
                <van-tab title="曲风">
                    <h1 class="top">曲风榜</h1>
                    <div class="index-list index-list-two aa">
                        <router-link :to="{name:'ranklist',query:{id:item.id}}" v-for="(item, index) in mu" :key="index">
                        
                                <div class="index-list-i">
                                    <img :src="item.coverImgUrl" alt="">
                                    <span>{{item.updateFrequency}}</span>
                                    <p class="ming">{{item.name}}</p>
                                </div>
                                
                        
                        </router-link>
                    </div>
                </van-tab>
            </div>
            <!-- 全球 -->
            <div class="frame">
                <van-tab title="全球">
                    <h1 class="top">全球榜</h1>
                    <div class="index-list index-list-two ">
                        <router-link :to="{name:'ranklist',query:{id:item.id}}" v-for="(item, index) in mus" :key="index">
                        
                                <div class="index-list-img">
                                    <img :src="item.coverImgUrl" alt="">
                                    <span>{{item.updateFrequency}}</span>
                                
                                </div>
                                <p class="ming zi">{{item.name}}</p>
                        
                        </router-link>
                    </div>
                </van-tab>
            </div>
            <!-- mv -->
            <div class="frame">
                 <van-tab title="MV">
                    <h1 class="top">MV榜</h1>
                    <div class="index-list index-list-two ">
                        <router-link :to="{name:'ranklist',query:{id:item.id}}" v-for="(item, index) in mui" :key="index">
                        
                                <div class="index-list-img">
                                    <img :src="item.coverImgUrl" alt="">
                                    <span>{{item.updateFrequency}}</span>
                                
                                </div>
                                <p class="ming zi">{{item.name}}</p>
                        
                        </router-link>
                    </div>
                </van-tab>
            </div>
            <!-- 特色 -->
            <div class="frame frame_1">
            <van-tab title="特色">
                <h1 class="top">特色榜</h1>
                <div class="index-list index-list-two ">
                    <router-link :to="{name:'ranklist',query:{id:item.id}}" v-for="(item, index) in muusi" :key="index">
                       
                            <div class="index-list-img">
                                <img :src="item.coverImgUrl" alt="">
                                <span>{{item.updateFrequency}}</span>
                               
                            </div>
                             <p class="ming zi">{{item.name}}</p>
                      
                    </router-link>
                </div>
            </van-tab>
            </div>
      </van-tabs>
    </div>
</template>

<script>
import {rankAPI} from "../../api/rank"
export default {
       name:"Cart",
    data() {
        
        return {
            active: "",
            musei:[],
            m:[],
            mu:[],
            mus:[],
             mui:[],
            muusi:[],
           
        };
    },
    computed: {},
    watch: {},
    
    methods: {
        onClickLeft(){
            this.$router.push('../home')
        },
        //排行榜接口
       async initRank(){
           const {data} = await rankAPI();
           console.log(data);
           if(data.code === 200) {
               for(let i = 0;i<data.list.length;i++){
                   if(data.list[i].tracks.length !==0) {
                       this.musei.push(data.list[i]);
                   }else if(data.list[i].userId === 1){
                       if(this.m.length < 6){
                           this.m.push(data.list[i]);
                       }else{
                           if(this.mu.length<9){
                               this.mu.push(data.list[i]);
                           }else{
                               this.muusi.push(data.list[i]);
                           }
                       }
                   }else{
                       if(this.mus.length<11){
                           this.mus.push(data.list[i]);
                       }else{
                           if(this.mui.length<9){
                               this.mui.push(data.list[i])
                           }
                       }
                   }
               }
           }
       }
    },
    created() {
        this.initRank()
    },
    mounted() {
        
    },
    components: {},
    }
</script>
<style scoped>
.cart {
  display: flex;
  flex-direction: column;
}
.top {
  font-size: 20px;
  text-align: center;
}
.index-search {
  display: flex;
  align-items: center;
  height: 35px;
  margin: 35px 15px 15px 15px;
  background: #f7f7f7;
  border-radius: 25px;
}
.index-search span {
  font-size: 13px;
  margin-right: 13px;
  margin-left: 14px;
  overflow: hidden;
}
.index-search input {
  font-size: 14px;
  flex: 1;
}
.index-list {
  margin: 0 15px;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}
.index-list-item {
  display: flex;
  margin-bottom: 15px;
}
.index-list-img {
  height: 106px;
  position: relative;
  overflow: hidden;
  margin-right: 11px;
}
.index-list-img img {
  width: 90px;
  height: 90px;
  border-radius: 10px;
  margin: 7px 0px 0px 7px;
}
.index-list-img span {
  position: absolute;
  left: 8px;
  bottom: 11px;
  color: white;
  font-size: 10px;
  text-align: center;
  width: 90px;
  display: block;
}

.index-list-im span {
  position: relative;
  left: 8px;
  bottom: 23px;
  color: white;
  font-size: 10px;
  text-align: center;
  width: 90px;
  display: block;
}

.index-list-i span {
  position: relative;
  left: 8px;
  bottom: 23px;
  color: #ffffff;
  color: white;
  font-size: 10px;
  text-align: center;
  width: 90px;
  display: block;
}

.index-list-im img {
  width: 90px;
  height: 90px;
  border-radius: 10px;
  margin: 7px 0px 0px 7px;
}

.index-list-i img {
  width: 90px;
  height: 90px;
  border-radius: 10px;
  margin: 7px 0px 0px 7px;
}

.index-list-text {
  font-size: 12px;
  line-height: 30px;
  overflow: hidden; /*超出部分隐藏*/
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  white-space: nowrap; /*规定段落中的文本不进行换行 */
  width: 80%; /*需要配合宽度来使用*/
  margin-top: 10px;
  color: #000;
  flex: 1;
}
.index-list a .index-list-one {
  border-radius: 7px;
  background-color: #fff;
  box-shadow: 0px 0px 8px 1px rgb(245, 245, 245);
}
.van-tabs__line {
  border-radius: 10px;
  height: 5px;
}
.van-tabs--line .van-tabs__wrap {
  height: 35px;
}
.van-tab__text {
  font-weight: bolder;
}
.top {
  font-weight: 900;
  text-align: left;
  margin-left: 20px;
 
}
.frame {
  display: flex;
  margin: 10px auto;
  border-radius: 10px;
  background-color: #fff;
}
.frame_1 .van-tab__pane {
  margin-bottom: 20px;
}
.van-nav-bar__text {
  color: #484848;
  font-size: 15px;
  font-weight: bolder;
}
.van-nav-bar__right {
  height: 30px;
  border: 1px solid #ffffff;
  border-radius: 25px 25px 25px 25px;
  width: 30px;
  margin-top: 7px;
  margin-right: 10px;
  font-weight: bolder;
  box-shadow: 0px 0px 8px 1px rgb(235, 236, 236);
}

.van-nav-bar .van-icon {
  color: #000;
  font-size: 15px;
}

.van-icon-arrow-left:before {
  font-size: 17px;
  font-weight: bolder;
}

.ming {
  width: 90px;
  text-align: left;
  position: relative;
  bottom: 15px;
  left: 10px;
  font-size: 14px;
  color: #000;
}
.zi {
  position: relative;
  bottom: 4px;
}
.aa a {
  margin-right: 10px;
}
</style>